<template>
  <div>
    <van-nav-bar
      title="发布新商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-button round type="info" size="small">发布</van-button>
      </template>
    </van-nav-bar>
    <!-- 文件上传 -->
    <van-cell-group>
      <van-field
        v-model="text"
        name="goodintroduce"
        type="textarea"
        placeholder="说说你的使用感受，入手渠道，转手原因..."
        maxlength="100"
        show-word-limit
        clearable="true"
        autocomplete="on"
        style="height: 1.8rem"
      />
    </van-cell-group>
    <!-- 图片上传 -->
    <div style="margin: 0 20px">
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="2"
        :after-read="afterRead"
        style="margin-bottom: 10px"
      />
    </div>
    <!-- 分类选择 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="分类/成色/商品名称" name="1" icon="more">
        <div class="fl_box">
          <div>
            <span>分类</span>
            <!-- <van-tabs
              type="card"
              duration="0"
              lazy-render="false"
              background="rgb(196, 196, 196)"
              color="black"
            >
              <van-tab v-for="(n, inx) in tabBtnList" :key="inx" :title="n">
              </van-tab>
            </van-tabs> -->
            <div class="test">
              <van-tabs
                v-model="active"
                duration="0"
                lazy-render="false"
                title-style="background:black;"
                title-active-color="rgb(0,0,0)"
              >
                <van-tab v-for="(n, inx) in tabBtnList" :key="inx" :title="n">
                  <template #title>
                    <van-button round type="info" size="small">{{
                      n
                    }}</van-button>
                  </template>
                </van-tab>
              </van-tabs>
            </div>
          </div>
          <div><span>成色</span></div>
          <div><span>商品名称</span></div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 价格 -->
    <van-cell is-link @click="showPopup"
      ><van-icon name="gold-coin" size="17" /> 价格</van-cell
    >
    <van-popup v-model="show" position="bottom" :style="{ height: '60%' }" round
      ><van-cell-group>
        <van-field v-model="number" type="number" label="原价" placeholder="请输入价格" />
        <van-field v-model="number" type="number" label="定价" placeholder="请输入价格"/>
      </van-cell-group>
      <van-number-keyboard
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
    />
    </van-popup>
    <!-- foot -->
    <footer_bar></footer_bar>
  </div>
</template>

<script>
import footer_bar from "./footer_bar.vue";
import axios from "axios";
import { Toast } from "vant";
export default {
  name: "add",
  data() {
    return {
      text: "",
      fileList: [],
      activeNames: ["1"],
      tabBtnList: [
        "数码产品",
        "书籍",
        "潮鞋潮服",
        "美妆护肤",
        "服饰包包",
        "生活工具",
      ],
      active: "",
      show: false,
      value: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onClickRight() {
      Toast("执行上传操作");
      console.log(text);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    showPopup() {
      this.show = true;
    },
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast("删除");
    },
  },
  components: { footer_bar },
  // created() {
  //   axios.get("http://localhost:6632/get_tablist").then((_d) => {
  //     console.log(_d.data);
  //     this.tabBtnList = _d.data;
  //   });
  // },
};
</script>

<style scoped>
/* .preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 100px;
} */
.van-uploader__upload {
  background-color: #f8d086;
  border-radius: 5px;
}
.van-tabs {
  /* display: inline-block; */
  float: left;
}
.van-tab {
  background: red;
  margin: 10px;
  padding: 0;
}
.fl_box span {
  display: inline-block;
  /* line-height: 44px; */
  font-weight: bold;
}
.test {
  float: right;
}
.van-tabs__line {
  background-color: #fff;
}
.custom-title {
  margin-right: 4px;
  font-weight: bold;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>